<template>
    <div class="chart-box">
        <div class="item">
            <div class="title">受理</div>
            <div class="number">22234</div>
            <div class="precent">
                <img src="../../../assets/down.png" alt="">
                18%
            </div>
        </div>
        <div class="item">
            <div class="title">新收</div>
            <div class="number">5555</div>
            <div class="precent">
                <img src="../../../assets/up.png" alt="">
                18%
            </div>
        </div>
        <div class="item">
            <div class="title">已结</div>
            <div class="number">12</div>
            <div class="precent">
                <img src="../../../assets/down.png" alt="">
                18%
            </div>
        </div>
        <div class="item">
            <div class="title">未结</div>
            <div class="number">333</div>
            <div class="precent">
                <img src="../../../assets/up.png" alt="">
                18%
            </div>
        </div>
    </div>
</template>

<script>

export default {
    name: "CenterNodule",
    data() {
        return {
        }
    },
    mounted() {
    }
}
</script>

<style lang="less" scoped>
.chart-box {
    display: flex;
    align-content: center;
    justify-content: center;
    overflow: hidden;
    width: 100%;
    height: 100%;
    gap: 26px;

    .item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        .title {
            font-size: 26.12px;
            color: #00EAFF;
            align-self: flex-start;
            display: flex;
            align-items: baseline;

            &::before {
                content: '';
                width: 11px;
                height: 11px;
                background: #0094DF;
                display: inline-block;
                margin: 0 10px 0 0;
            }
        }

        .number {
            width: 136px;
            height: 55px;
            background: url(../../../assets//sz_img1.png) no-repeat;
            background-size: cover;
            font-size: 26.12px;
            text-align: center;
            color: #FFFFFF;
            line-height: 55px;
            margin: 10px 0 3px;
        }

        .precent {
            display: flex;
            align-items: center;
            font-size: 24px;
            color: #FFFFFF;
        }
    }
}
</style>